<template>
  <div>
    <h5>wathers</h5>
    <p>counte:{{ count }}</p>
    <p>obj.age:{{ obj.age }}</p>
    <button @click="add">{{ count }}</button>

    <hr />

    <input type="text" v-model="todoId"  />
    <ul>
      <li v-for="item in data" :key="item.id">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const count = ref(0);

const x = ref(1);
const y = ref(2);
const obj = reactive({
  age: 20,
});

const add = () => {
  count.value++;
  x.value++;
  obj.age++;
};
watch(count, (nv, ov) => {
  console.log("nv--", nv);
});

watch(x, (newx) => {
  console.log("newx", newx);
});

watch(
  () => x.value + y.value,
  (sum) => {
    console.log("x+y=", sum);
  }
);

watch([x, () => y.value], ([newx, newy]) => {
  console.log(`x is ${newx} y is ${newy}`);
});

watch(
  () => obj.age,
  (newobj) => {
    console.log("newobj.age is", newobj);
  }
);
watch(
  obj,
  (newobj) => {
    console.log("newobj", newobj);
  },
  { deep: true, immediate: true }
);

const todoId = ref(1);
const data = ref([]);

// watch(
//   todoId,
//   async () => {
//     const response = await fetch(
//       `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
//     );
//     data.value = await response.json();

//     console.log(data.value,'data--');
//   },
//   { immediate: true }
// );
watchEffect(async () => {
  data.value = []
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  );
  let json = await res.json()
  data.value.push(json);
  console.log(data.value, "data--");
});
</script>